<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router-3.6.5.js"></script>
</head>
<body>
<div id="app">
    <!-- 5. 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    <!--
         参数携带的方式 常见方案2种
         query string:   /login?username=tom&password=123456
         path  restful   /login/tom/123456

    -->
    <h2>使用router-link实现路由切换 to="string"</h2>
    <p>
        <router-link to="/login?username=tom&password=123456">登录</router-link>
    </p>
    <p>
        <router-link to="/register/jack/666666">注册</router-link>
    </p>


    <hr>
    <h2>使用router-link实现路由切换 :to="{path}"</h2>
    <p>
        <router-link :to="{path:'/login',query:{username:'tom',password:'666666'}}">登录</router-link>
    </p>
    <p>
        <router-link :to="{path:'/register'}">注册</router-link>
    </p>

    <hr>
    <h2>使用router-link实现路由切换 :to="{name}"</h2>
    <p>
        <router-link :to="{name:'login'}">登录</router-link>
    </p>
    <p>
        <router-link :to="{name:'register',params:{username:'tom',password:'666666'}}">注册</router-link>
    </p>

</div>


<script>

    // 登录组件
    const login = {

        template: `
          <div>
          <h2>欢迎登录</h2>
          <form action="#" method="get">
            <p><input type="text" placeholder="请输入用户名" v-model="user.username"></p>
            <p><input type="text" placeholder="请输入密码" v-model="user.password"></p>
            <p><input type="submit" value="登录"></p>
          </form>
          </div>
        `,
        data() {
            return {
                user: {
                    username: '',
                    password: ''
                }
            }
        },
        created() {
            //  主键对象初始化时 如何获取路由中携带的参数
            // let username = this.$route.query.username
            // let password = this.$route.query.password

          // 通过query string 的方式实现参数传递  当前路由对象会将参数封装在 query属性中
            let {username, password} = this.$route.query  // {username:tom,password:123456}
            console.log(username)
            console.log(password)
            this.user = this.$route.query

        }

    }

    // 注册组件
    const register = {
        template: `
        <div>
            <h2>欢迎注册</h2>
            <form action="#" method="get">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="text" placeholder="请输入密码"></p>
                <p><input type="submit" value="注册"></p>
            </form>
        </div>
    `,
       created() {
          // 通过path方式实现参数的传递  则当前路由对象会将参数封装在params属性中
         console.log(this.$route.params)
       }
    }

    // 404组件
    const fileNotFound = {
        template: `
          <h2>页面找不到</h2>
      `
    }

    // 2.定义路由  路由列表  定义路径和组件的对应关系
    const routes = [
        {
            path: '/',
            redirect: '/login'   //  实现路由重定向
        },
        {
            path: '/login',     //  路径
            component: login,   // 组件
            name: "login"     //  命名路由
        },
        {
            path: '/register',    //  使用path实现参数传递 需要设置占位
            component: register,
            name: "register"
        },
        {
            path: '/**',
            component: fileNotFound,
            name: "404"
        }
    ]

    // 3. 创建路由实例
    const router = new VueRouter({
        routes  // // (缩写) 相当于 routes: routes
    })


    // 4.创建和挂载根实例
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            login() {
                //  使用js实现路由切换   获取路由管理对象
                // this.$router.push("/login")
                // this.$router.push({path:'/login'})
                this.$router.push({name: 'login'})
            },
            register() {
                this.$router.push("/register")
            }
        },
        components: {
            // login,
            // register
        },
        router
    })

</script>


</body>
</html>